<template>
  <div class="certificateAddBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: true,backText:''}" class="headerBox">
      添加证书
      <div slot="right" @click="confirm">确定</div>
    </x-header>
    <upload
      :upload-url="uploadUrl"
      :max="3"
      :images="certificate.imgList"
      :show-header="true"
      size="small"
    ></upload>
    <!-- 图片上传默认配置 -->
      <!-- <upload
      :max="3"
      :images="certificate.imgList"
      :show-header="false"
      :upload-url="uploadUrl"
      name="img"
      :params="params"
      size="small"
      @preview="previewMethod"
      @add-image="addImageMethod"
      @remove-image="removeImageMethod"
    ></upload> -->
    <group>
      <x-input title="证书名称" v-model="certificate.name" placeholder="请输入证书名称"></x-input>
      <x-input title="证书编号" v-model="certificate.number" placeholder="请输入证书编号"></x-input>
      <datetime
        title="颁发时间"
        class="dataBox"
        placeholder="请选择时间"
        v-model="certificate.time"
        start-date="1970-01-01"
        end-date="2019-12-30"
        format="YYYY-MM-DD"
      ></datetime>
      <x-address
        title="颁发地点"
        v-model="certificate.address"
        :list="addressData"
        @on-shadow-change="onShadowChange"
        placeholder="请选择地址"
        class="addressBox"
      ></x-address>
      <x-input title="颁发机构" v-model="certificate.org" placeholder="请输入证书颁发机构"></x-input>
      <x-input title="证书说明" v-model="certificate.remark" placeholder="请输入证书说明"></x-input>
    </group>
  </div>
</template>

<script>
import { XHeader, Datetime, Group, XInput, XAddress, ChinaAddressV4Data } from 'vux'
import Upload from '../components/Uploader'
export default {
  components: {
    XHeader,
    Datetime,
    Group,
    XInput,
    XAddress,
    Upload
  },
  data() {
    return {
      certificate: {
        id: '1',
        name: '',
        number: '',
        time: '',
        address: [],
        org: '',
        remark: '',
        imgList: [
          {
            url: require('../assets/img/authenticationA.png')
          },
          {
            url: require('../assets/img/authenticationB.png')
          },
        ],
      },
      sexList: [['男', '女', '不告诉你']],
      addressData: ChinaAddressV4Data,
    }
  },
  methods: {
    confirm() {

    },
    onShadowChange(ids, names) {
      console.log(ids, names)
    },
  }
}
</script>

<style lang="less" scoped>
.certificateAddBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
    .vux-header-right {
      color: #000;
    }
  }
  /deep/.addressBox {
    .vux-cell-placeholder {
      color: #757575;
    }
    .vux-cell-value {
      color: #000;
    }
    .weui-cell__ft {
      padding-right: 0;
    }
    .weui-cell__ft:after {
      content: none;
    }
  }
  /deep/.dataBox {
    .vux-cell-placeholder {
      color: #757575;
    }
    .vux-cell-value {
      color: #000;
    }
    .weui-cell__ft {
      padding-right: 0;
    }
    .weui-cell__ft:after {
      content: none;
    }
  }

  /deep/.weui-input {
    text-align: right;
  }
}
</style>